<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad"
               @cell-click="handleCell"
               :cell-class-name="addClass">
      <template slot-scope="scope" slot="menu">
        <el-button type="text"
                   size="small"
                   plain
                   class="none-border"
                   @click.stop="handleImage(scope.row,scope.index)">流程图
        </el-button>
      </template>
    </avue-crud>
    <el-dialog title="流程图"
               append-to-body
               :visible.sync="flowBox"
               :fullscreen="true">
      <iframe
        :src=flowUrl
        width="100%"
        height="700"
        title="流程图"
        frameBorder="no"
        border="0"
        marginWidth="0"
        marginHeight="0"
        scrolling="no"
        allowTransparency="yes">
      </iframe>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="flowBox = false">关 闭</el-button>
      </span>
    </el-dialog>
      <!-- 办理 -->
    <el-dialog title="办理详情"
               append-to-body
               :visible.sync="dealBox"
               width="80%" >
               <el-container>
                <el-main style="overflow: hidden;" >
                    <avue-form :option="option" :rules="rules" v-model="form" >
                    </avue-form>
                </el-main>
                <el-aside width="35%"  >
                  <el-card >
                    
                       <div class="calendar-info">
                        <el-card shadow="hover">
                            <div slot="header">
                              <span>流程信息</span>
                            </div>
                            <el-row type="flex" class="row-bg">
                              <el-timeline>
                               
                                <el-timeline-item :key="flow.id" :timestamp="flow.assigneeName" v-for="flow in flowList" placement="top">
                                  <el-card shadow="hover">
                                    <p>在 [{{flow.handlingTime}}] 开始处理 [{{flow.historyActivityName}}] 环节</p>
                                    <p v-if="flow.comment!==''">批复意见: [{{flow.comment}}]</p>
                                  </el-card>
                                </el-timeline-item>
                              </el-timeline>
                            </el-row>
                          </el-card>
                          <el-card shadow="hover">
                            <div slot="header">
                              <span>流程跟踪</span>
                            </div>

                            <el-row type="flex" class="row-bg" v-if="src!=''">
                              <img :src="src" alt="design" width="100%">
                            </el-row>
                            <div slot="header" v-if="src==''">
                              <br/>
                              自办矛盾，无流程图
                            </div>
                          </el-card>
                       </div>
                    </el-card>
                </el-aside>
                 
                </el-container>
    </el-dialog>
  </basic-container>
</template>

<script>
  import {getList, getDetail,disputeFlowList} from "@/api/xapply/publicEvent/myHandleEvent";
  import {mapGetters} from "vuex";
  import {getMultilevelMore} from "@/api/system/multilevelDict";
  import { validatenull} from "@/util/validate";

  export default {
    data() {
      return {
        form: {},
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        flowBox: false,
        dealBox: false,
        flowUrl: '',
        src: '',
        selectionList: [],
        flowList:[],
        option: {
          indexLabel:'序号',
          height: 'auto',
          calcHeight: 30,
          dialogWidth: 1150,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          viewBtn: false,
          addBtn: false,
          editBtn: false,
          delBtn: false,
          selection: false,
          excelBtn: false,
          emptyBtn: false,
          cancelBtn: true,
          submitBtn: false,
          dialogClickModal: false,
          column: [
            {
              label: "主键",
              prop: "id",
              type: "input",
              display: false,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
              hide: true,
            },
            {
              label: "县（市）区",
              prop: "city",
              type: "select",
              disabled: true,
              //dicUrl: "/api/smart-system/dept/selectCityDeptTree?pid=1123598813738675201",
              dicUrl: "/api/smart-system/dept/selectCityDeptTree?pid=100",
              props: {
                label: "title",
                value: "key",
              },
              hide: true,
              rules: [{
                required: true,
                message: "请输入县（市）区",
                trigger: "blur"
              }],
            },
            {
              label: "街道",
              prop: "streetName",
              type: "input",
              disabled: true,
              hide: true,
             
              rules: [{
                required: true,
                message: "请输入街道",
                trigger: "blur"
              }],
            },
            {
              label: "标题",
              prop: "title",
              type: "input",
              disabled: true,
              span: 24,
              search: true,
              rules: [{
                required: true,
                message: "请输入标题",
                trigger: "blur"
              }],
            },
             {
            label: '事件类别',
            prop: 'type',
            type: "cascader",
            disabled: true,
            dicData: [],
            filterable: true,
            hide: true,
            rules: [{
              required: true,
              message: "请输入事件类别",
              trigger: "blur"
            }],
            },
            {
              label: "事件紧急度",
              prop: "emergencyDegree",
              type: "select",
              disabled: true,
               dicUrl: "/api/smart-system/dict/dictionary?code=emergencyDegree",
              span: 8,
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              rules: [{
                required: true,
                message: "请输入事件紧急度",
                trigger: "blur"
              }],
            },
            {
              label: "反映人",
              prop: "reportName",
              type: "input",
              disabled: true,
              search: true,
              rules: [{
                required: true,
                message: "请输入反映人",
                trigger: "blur"
              }],
            },
            {
              label: "反映人电话",
              prop: "reportPhone",
              type: "input",
              disabled: true,
              search: true,
              rules: [{
                required: true,
                message: "请输入反映人电话",
                trigger: "blur"
              }],
            },
            
            {
              label: "基本情况",
              prop: "content",
              type: "textarea",
              disabled: true,
              span: 24,
              hide: true,
              rules: [{
                required: true,
                message: "请输入基本情况",
                trigger: "blur"
              }],
            },
           
           
             {
              label: "发生地点",
              prop: "happenAddress",
              type: "input",
              disabled: true,
              span: 24,
              rules: [{
                required: true,
                message: "请输入发生地点",
                trigger: "blur"
              }],
            },
            {
              label: "经度",
              prop: "lng",
              type: "input",
              disabled: true,
              hide: true,
            },
            {
              label: "纬度",
              prop: "lat",
              type: "input",
              disabled: true,
              hide: true,
            },
            {
              label: "来源",
              prop: "code",
              type: "select",
              dicData: [
                {
                  label: "微信",
                  value: "1",
                },
                {
                  label: "公众APP",
                  value: "2",
                }
              ],
              display: false,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
            },
             {
              label: "流程环节",
              prop: "status",
              type: "select",
              dicData: [
                {
                  label: "上报",
                  value: 1
                },
                {
                  label: "转派",
                  value: 2
                },
                {
                  label: "指派村社区",
                  value: 3
                },
                {
                  label: "反馈镇街",
                  value: 4
                },
                {
                  label: "办结",
                  value: 5
                },
              ],
              display: false,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
            },   
             {
              label: "是否解决",
              prop: "isSolve",
              type: "select",
              dicData: [
                {
                  label: "解决",
                  value: "Y"
                },
                {
                  label: "未解决",
                  value: "N"
                },
              ],
              display: false,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
            },    
             {
              label: "创建时间",
              prop: "createTime",
              type: "input",
              display: false,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
            },
            // {
            //   label: "办理方式",
            //   prop: "handleType",
            //   type: "select",
            //   dicData:[],
            //    props: {
            //     label: "title",
            //     value: "key"
            //   },
            //  rules: [{
            //     required: true,
            //     message: "请选择办理方式",
            //     trigger: "blur"
            //   }],
            // hide: true,
            // change: ({value}) => {
            //   this.handlerChangeType(value);
            // },
            // },
            // {
            //   label: "转/指派部门",
            //   prop: "turnDept",
            //   type: "tree",
            //   span: 12,
            //   parent: false,
            //   display: false,
            //   dicMethod: "get",
            //   hide: true,
            //   dicData: [],
            //   props: {
            //     label: "title",
            //     value: "key"
            //   },
            //   checkStrictly: true,
            //   rules: [{
            //     required: true,
            //     message: "请输入转/指派部门",
            //     trigger: "click"
            //   }],
            // },
            // {
            //   label: "处理意见",
            //   prop: "handlingSuggestion",
            //   type: "textarea",
            //   minRows:4,
            //   maxlength: 4000,
            //   showWordLimit: true,
            //   hide: true,
            //   span: 24,
            //   rules: [{
            //     required: true,
            //     message: "请输入处理意见",
            //     trigger: "click"
            //   }],
            // },
          ]
        },
        data: [],
      };
    },
    mounted() {
        this.initData();
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
       
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    methods: {
      addClass({columnIndex}){
                if(columnIndex === 1 ){
                  return 'cell-blue'
                }
            },
      //  handlerChangeType(value){
      //    console.log("---"+value);
      //       var turnDept = this.findObject(this.option.column,"turnDept");//转/指派部门
      //       if(value == 'streetBu'){
      //           this.form.turnDept = "";
      //           turnDept.display = true;
      //           getTurnDeptList().then(res=>{
      //             turnDept.dicData = res.data.data;
      //           })
      //       }else if(value == 'streetToCommunity'||value == 'communityToGrid'){
      //         this.form.turnDept = "";
      //           turnDept.display = true;
      //            getChildTurnDeptList().then(res=>{
      //             turnDept.dicData = res.data.data;
      //           })
      //       }else{
      //           turnDept.display = false;
      //       }
      // },
     //处理
      //查看
      handleCell(row,column){
       
        if(column.label=="标题") {
            //流程图
             if(!validatenull(row.flowId)){
              this.src = `/api/smart-flow/process/diagram-view?processInstanceId=${row.flowId}`;
             }
            //流程信息--这是用的自己的流程
            disputeFlowList(row.id).then(res=>{
            const data = res.data;
              if (data.success) {
                this.flowList = data.data;
              }
            })
            getDetail(row.id).then(res => {
              this.form = res.data.data;
                if(this.form.hasOwnProperty("type")){
                  this.form.type = res.data.data.type.split(",");
                }
                this.dealBox = true;
              //   getNextTaskCondition(row.taskId).then(res=>{
              //   //处理字段
              //   const handleType = this.findObject(this.option.column ,"handleType");
              //   handleType.dicData =res.data.data;
              // })
            });
        }
      },
      //查看流程图
      handleImage(row) {
          this.flowUrl = `/api/smart-flow/process/diagram-view?processInstanceId=${row.flowId}`;
          this.flowBox = true;
      },
      //加载事件类别级联
      initData() {
       let dictType1 = "event_type";
        getMultilevelMore(dictType1).then(res=>{
          var type =this.findObject(this.option.column,'type');
          type.dicData = res.data.data;
         
        });
      },
     
      beforeOpen(done) {
       
        done();
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1
        this.onLoad(this.page, params);
        done();
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      onLoad(page, params = {}) {
        this.loading = true;
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      }
    }
  };
</script>

<style>
.el-form-item__content{
   margin-left: 100px ! important;
}
.el-form-item__label {
  width: 100px ! important;
}
  .cell-blue{
        color: blue!important;
        cursor: pointer;
    }
</style>
